<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Flexbox Ratios on the main axis: min-content and max-content</title>

    <style>
      body {
        font:
          1.2em Helvetica,
          Arial,
          sans-serif;
        margin: 20px;
        padding: 0;
      }

      textarea {
        font-family: monospace;
        display: block;
        margin-bottom: 10px;
        background-color: #f4f7f8;
        border: none;
        border-left: 6px solid #558abb;
        color: #4d4e53;
        width: 90%;
        max-width: 700px;
        padding: 10px 10px 0px;
        font-size: 90%;
      }

      textarea:nth-of-type(1) {
        height: 150px;
      }

      textarea:nth-of-type(2) {
        height: 110px;
      }

      .playable-buttons {
        text-align: right;
        width: 90%;
        max-width: 700px;
        padding: 5px 10px 5px 26px;
        font-size: 100%;
      }

      section {
        width: 90%;
        max-width: 700px;
        border: 1px solid #4d4e53;
        border-radius: 2px;
        padding: 10px 14px 10px 10px;
        margin-bottom: 10px;
      }

      section input {
        display: block;
        margin: 5px;
      }
    </style>

    <style class="editable">
      .min-content {
        width: min-content;
        border: 2px dotted rgb(96 139 168);
      }
      .max-content {
        width: max-content;
        border: 2px dotted rgb(96 139 168);
      }
    </style>
  </head>

  <body>
    <section>
      <p class="min-content">
        I am sized with min-content and so I will take all of the soft-wrapping
        opportunities.
      </p>
      <p class="max-content">
        I am sized with max-content and so I will take none of the soft-wrapping
        opportunities.
      </p>
    </section>
    <textarea class="playable-css">
.min-content {
  width: min-content;
  border: 2px dotted rgb(96 139 168);
}
.max-content {
  width: max-content;
  border: 2px dotted rgb(96 139 168);
}</textarea
    >
    <textarea id="code" class="playable-html">
<p class="min-content">I am sized with min-content and so I will take all of the soft-wrapping opportunities.</p>
<p class="max-content">I am sized with max-content and so I will take none of the soft-wrapping opportunities.</p></textarea
    >
    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>
  <script>
    var section = document.querySelector("section");
    var editable = document.querySelector(".editable");
    var textareaHTML = document.querySelector(".playable-html");
    var textareaCSS = document.querySelector(".playable-css");
    var reset = document.getElementById("reset");
    var htmlCode = textareaHTML.value;
    var cssCode = textareaCSS.value;

    function fillCode() {
      editable.innerHTML = textareaCSS.value;
      section.innerHTML = textareaHTML.value;
    }

    reset.addEventListener("click", function () {
      textareaHTML.value = htmlCode;
      textareaCSS.value = cssCode;
      fillCode();
    });

    textareaHTML.addEventListener("input", fillCode);
    textareaCSS.addEventListener("input", fillCode);
    window.addEventListener("load", fillCode);
  </script>
</html>
